<template>
  <globle-dialog ref="globleDialogRef" :title="globleDialogConfig.title" @onClickConfirmBtn="onConfirm"
    @onClickCancelBtn="onCancel" @onDialogOpen="onDialogOpen" @onBeforeColse="onBeforeColse">
    <globle-form ref="globleFormRef" :bindData="globleFormConfig.bindData"
      :itemConfig="globleFormConfig.itemConfig"></globle-form>
  </globle-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { APIData, ITch } from '../../../type';
import { formType, IGlobleFormProps } from '../../../components/form/type';
import { useAPI } from '../../../request/api';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRuleUtils } from '../../../utils/validate';

let state = ''  //add edit
const api = useAPI();
const ruleUtils = useRuleUtils();
const globleDialogRef = ref();
const globleFormRef = ref();
const errorNecessaryMsg = '这是必填项';

const globleDialogConfig = { title: '教师信息' };
const globleFormConfig: IGlobleFormProps = reactive({
  bindData: {} as ITch,
  itemConfig: [
    {
      type: formType.input,
      label: '工 号',
      prop: 'workId',
      placeholder: '请输入教师工号',
      rules: [{ required: true, message: errorNecessaryMsg, trigger: 'blur' }],
    },
    {
      type: formType.input,
      label: '姓 名',
      prop: 'name',
      placeholder: '请输入教师姓名',
      rules: [{ required: true, message: errorNecessaryMsg, trigger: 'blur' }],
    },
    {
      type: formType.select,
      label: '性 别',
      prop: 'sex',
      placeholder: '请输入教师性别',
      rules: [{ required: true, message: errorNecessaryMsg, trigger: 'change' }],
      options: [{ label: '男', value: 1 }, { label: '女', value: 0 },],
    },
    {
      type: formType.input,
      label: '身份证号',
      prop: 'identityId',
      placeholder: '请输入教师身份证号',
      rules: [{ validator: ruleUtils.identityId, trigger: 'blur' }],
    },
    {
      type: formType.input,
      label: '手机号',
      prop: 'phone',
      placeholder: '请输入教师手机号',
      rules: [{ validator: ruleUtils.phone, trigger: 'blur' }],
    },
    {
      type: formType.input,
      label: 'QQ号',
      prop: 'qq',
      placeholder: '请输入教师QQ号',
      rules: [{ validator: ruleUtils.qqNum, trigger: 'blur' }],
    },
    {
      type: formType.select,
      label: '管理员',
      prop: 'isAdmin',
      placeholder: '请选择是否为管理员',
      rules: [{ required: true, message: errorNecessaryMsg, trigger: 'change' }],
      options: [
        { label: '是', value: 1 },
        { label: '否', value: 0 },
      ],
    },
  ],
});

const openDialogByEdit = (row: ITch) => {
  state = 'edit'
  globleDialogRef.value.isShowDialog = true;
  globleFormConfig.bindData = JSON.parse(JSON.stringify(row));
};

const openDialogByAdd = () => {
  state = 'add'
  globleDialogRef.value.isShowDialog = true;
};

const emit = defineEmits(['onReGetData']);
//点击确定
const onConfirm = () => {
  const formEl = globleFormRef.value.formRef;
  formEl.validate((valid: boolean) => {
    if (valid)
      save().then(code => {
        if (code === 200) {
          emit('onReGetData');
          reset();
        }
      });
    else return false;
  });
};

//点击取消
const onCancel = () => {
  if (state == 'add') ElMessage.success('您取消了操作，数据已保留');
  else if (state == 'edit') ElMessage.success('您取消了操作');
  globleDialogRef.value.isShowDialog = false;
};

//监听弹窗开启
const onDialogOpen = () => {
  if (state == 'add') {
    const formEl = globleFormRef.value.formRef;
    globleFormConfig.bindData = {};
    formEl.clearValidate();
  }
};

//监听弹窗关闭之前
const onBeforeColse = () => {
  ElMessageBox.confirm('关闭将不保存更改，确定继续吗').then(() => {
    reset();
  }).catch(() => {
    // catch error
  })
};

const reset = () => {
  globleDialogRef.value.isShowDialog = false;
  const formEl = globleFormRef.value.formRef;
  globleFormConfig.bindData = {};
  formEl.clearValidate();
};


const save = async () => {
  const res: APIData = await api.teacher.save(globleFormConfig.bindData);
  if (res.code === 200) {
    if (state == 'add') ElMessage.success("添加成功");
    if (state == 'edit') ElMessage.success("修改成功");
  }
  else ElMessage.error(res.message);
  return res.code;
};

defineExpose({ openDialogByEdit, openDialogByAdd });
</script>

<style scoped></style>
